<template>
  <div class="column discover">
    <div class="column justify-start q-pa-md">
      <div class="title">{{ $t('home.discoverTitle') }}</div>
      <div class="sub-title">{{ $t('home.discoverSubTitle') }}</div>
    </div>

    <featured-video-container
      :videos="videos"
      v-for="(videos, index) in groups"
      :key="index"
    />
  </div>
</template>
<script setup lang="ts">
import { defineComponent, computed, onBeforeMount } from 'vue';
import FeaturedVideoContainer from './FeaturedVideoContainer.vue';
import Video from 'src/models/Video';
import { arrTrans } from 'src/utils/common';
import { useUserStore } from 'src/stores/user-store';
import { useVideoStore } from 'src/stores/video-store';

const userStore = useUserStore();
const videoStore = useVideoStore();
const currentUser = computed(() => userStore.currentUser);

let languages = [navigator.language];
if (currentUser.value) {
  languages = currentUser.value.languages;
}
const groups = computed<Array<Video[]>>(() =>
  arrTrans(9, videoStore.discoverVideos)
);
onBeforeMount(async () => {
  await videoStore.getDiscoverVideos({
    page: 0,
    size: 18,
  });
});
</script>
<style lang="sass" scoped>
.discover
  max-width: 1450px
  min-width: 960px
  width: 100%
  .title
    font-size: 22px
  .sub-title
    font-size: 14px
    font-weight: bold
    color: #ACACAC
</style>
